<html>
<head>
<link href="doc.css" rel="stylesheet" type="text/css">
<title>aiTree</title>
</head>
<body>
<h2>aiTree :: collapsible tree component for use with aynHTML Editor</h2>
	<ul>
		<li><a href="#name">NAME</a></li>
		<li><a href="#version">VERSION</a></li>
		<li><a href="#synopsis">SYNOPSIS</a></li>
		<li><a href="#description">DESCRIPTION</a></li>
		<li><a href="#properties">PROPERTIES</a></li>
		<li><a href="#methods">METHODS</a></li>
		<li><a href="#events">EVENTS</a></li>
		<li><a href="#todo">TO DO</a></li>
		<li><a href="#author">AUTHOR</a></li>
		<li><a href="#homepage">HOMEPAGE</a></li>
		<li><a href="#copyleft">COPYLEFT</a></li>
	</ul>
<hr><h1><a name="name">NAME</a></h1>
<p>aiTree :: collapsible tree component for use with aynHTML Editor</p>
<hr><h1><a name="version">VERSION</a></h1>
<p>Version 0.20b (beta) - 2003-05-05</p>
<hr><h1><a name="synopsis">SYNOPSIS</a></h1>

<pre>
&lt;html xmlns:AI&gt;
	&lt;head&gt;
		&lt;?import namespace="AI" implementation="aiTree.htc" /&gt;
		&ltscript language="javascript"&gt;
			onload = function() {
				aiTree.data = '&lt;root /&gt;';
			}
			
			aiTree.onchoose = do_something;
			
			function do_something( e ) {
				txtUrl.value = e.href;
				txtName.value = e.name;
			}
		&lt/script&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&ltinput id="txtUrl"&gt;
		&ltinput id="txtName"&gt;
		&ltAI:aiTree id="aiTree" preview="1" /&gt;
	&lt;/body&gt;
&lt;/html&gt;
</pre>
<hr><h1><a name="description">DESCRIPTION</a></h1>
<p>This is a hypertext component which can be embedded as a custom element in an HTML page.
	The component builds a collapsible tree from an xml string passed into it.
	Clicking on an item generates an event which can be captured in the containing document.</p>
<p>Optionally, a preview pane shows a thumbnail of the images loaded into the tree.</p>
<p>The component is implemented as an element behaviour, which is supported in IE 5.5 and above.</p>
<hr><h1><a name="properties">PROPERTIES</a></h1>
	<dl>
		<dt>id
		<dd><p>Id of the object, so it can be referenced in script in the containing document.</p>
		<dt>data
		<dd>
	<p>Well-formed xml string that contains the items to be rendered.<br>The tree follows the structure of the elements in the string.  Element names can be freely chosen,
	the attributes "name" and "href" of each element are used respectively as the title and the hyperlink
	of each item.  Elements without a non-existing or empty name attribute are shown as "no title".
	File urls should be absolute links to the location of the file, as relative links will be resolved relative to the location of the page containing the aiTree component.
	Folder names are not used to construct the url,
	so the tree need not correspond to a physical equivalent on the webserver.</p>
	<p>For example, this file:</p>
	
	<pre>&lt;root&gt;
	&lt;element name="images" &gt;&lt;element /&gt;
	&lt;folder name="Documents" &gt;
		&lt;file name="Love Letter" href="/upload/docs/loveletter.txt" &gt;
		&lt;folder &gt;&lt;/folder &gt;
	&lt;/folder&gt;
&lt;/root&gt;</pre>
	will look like this in fully extended view:<br><br>
	<pre>images
- Documents
  Love Letter
  no title</pre><br>
		<dt>preview
		<dd><p>Whether or not to show a preview screen next to the tree window.
		Useful when loading a list of images into the tree.<br>
		A thumbnail of the image will be shown in the preview pane when passing over the item with the mouse.<br>
		<br>
		Values: 1 | 0 ( default ).</p>
	</dl>
<hr><h1><a name="methods">METHODS</a></h1>
<p>no public methods defined.</p>
<hr><h1><a name="events">EVENTS</a></h1>
	<dl>
		<dt>onchoose
		<dd><p>The onchoose event is raised when the user clicks on an item with an href attribute.</p>
		<p>The event object raised has two custom properties:</p>
		<dl>
			<dt>href<dd>The href attribute of the item clicked on.
			<dt>name<dd>The name attribute of the item clicked on.
		</dl>
	</dl>
<hr><h1><a name="todo">TO DO</a></h1>
<ul>
	<li>add a stylesheet property to the component, so the appearance can be customized.</li>
	<li>add width and height properties for the tree window and the preview pane.</li>
	<li>add properties for the open and closed icons so they can be customized.</li>
	<li>add a "no title" property so the title of a nameless element can be customized.</li>
	<li>rewrite the whole stuff so the component becomes a full-fledged remote file manager.</li>
</ul>
<hr><h1><a name="author">AUTHOR</a></h1>
<p>Original developer: Denis Braet &lt;<a href="mailto:denis.braet@aine.be">denis.braet@aine.be</a>&gt;</p>
<hr><h1><a name="homepage">HOMEPAGE</a></h1>
<p>The aynHTML project is hosted at <a href="sourceforge.net">SourceForge.net</a>.</p>
<p>Please visit <a href="http://sourceforge.net/projects/aynhtml/">http://sourceforge.net/projects/aynhtml/</a>
for the latest release, updates and bug fixes.</p>
<hr><h1><a name="copyleft">COPYLEFT</a></h1>
<p>aiTree :: collapsible tree component for use with aynHTML editor</p>
<p>Copyright &copy; 2002-2003, Denis Braet. &lt;<a href="mailto:denis.braet@aine.be">denis.braet@aine.be</a>&gt;</p>
<p>This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.</p>
<p>This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.</p>
<p>You should have received a copy of the GNU General Public License
    along with this program; if not, a copy can be obtained at:</p>
<p><a href="http://http://www.gnu.org/licenses/gpl.html">http://http://www.gnu.org/licenses/gpl.html</a></p>
<hr>
</body>
</html>
